<script setup>
import FormItemSearch from '@/components/form/FormItemSearch.vue'
import TableColumnIndex from '@/components/table/TableColumnIndex.vue'
import TableColumnTime from '@/components/table/TableColumnTime.vue'
import GamesFormDialog from './GamesFormDialog.vue'
import { usePagination, useRequest, useDialog } from '@/hooks'
import { gamesApi, userListApi } from '@/api'
import { ElMessage } from 'element-plus'

const GAMES_TYPE = ['通用', '篮球', '足球']
const GAMES_TYPE_COLORS = ['', 'warning', 'success']

const title = computed(() => useRoute().meta.title ?? '赛事列表')
const form = ref({
  loginName: '',
  userName: '',
  userPhone: '',
  loginDatetime: ''
})

const formRef = ref()
function reset() {
  formRef.value.resetFields()
  search()
}

const { pageSize, currentPage, pageSizes } = usePagination({
  onChange: () => refresh()
})

const { refresh, data, count } = useRequest(gamesApi.pageGameList, {
  initialData: [],
  immediate: true,
  params: () => ({
    ...form.value,
    pageNo: currentPage.value,
    pageSize: pageSize.value
  })
})

function search() {
  currentPage.value = 1
  refresh()
}

const { data: accounts } = useRequest(userListApi.selectAnchorLogin, {
  immediate: true,
  initialData: []
})

const active = ref(null)
const { visible, open } = useDialog(active)

async function handleSubmit(formValue) {
  await gamesApi.updateGame({ ...formValue, id: active.value.id })
  ElMessage.success('操作成功')
  visible.value = false
  refresh()
}

const detailFormDisable = ref(false)
function hanleOpen(row, disable = false) {
  detailFormDisable.value = disable
  open(row)
}
</script>

<template>
  <div>
    <el-card shadow="never">
      <template #header> {{ title }} </template>
      <el-form
        ref="formRef"
        :model="form"
        label-width="90px"
        label-suffix="："
        label-position="left"
        @submit.prevent="search"
      >
        <el-row :gutter="20">
          <FormItemSearch label="赛事名称" prop="gameName">
            <el-input v-model.trim="form.gameName" clearable />
          </FormItemSearch>
          <FormItemSearch label="赛事类型" prop="gameType">
            <el-select v-model="form.gameType" filterable clearable>
              <el-option
                v-for="(item, index) in GAMES_TYPE"
                :key="index"
                :label="item"
                :value="index"
              />
            </el-select>
          </FormItemSearch>
          <FormItemSearch label="所属账号" prop="phone">
            <el-select v-model="form.phone" filterable clearable>
              <el-option
                v-for="item in accounts"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </FormItemSearch>
        </el-row>

        <el-button type="primary" native-type="submit" @submit="search">
          搜索
        </el-button>
        <el-button @click="reset">重置</el-button>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <el-table :data="data" style="width: 100%">
        <TableColumnIndex :page="currentPage" :page-size="pageSize" />
        <el-table-column prop="gameName" label="赛事名称" />
        <el-table-column prop="gameType" label="赛事类型">
          <template #default="{ row }">
            <el-tag :type="GAMES_TYPE_COLORS[row.gameType]">
              {{ GAMES_TYPE[row.gameType] }}
            </el-tag>
          </template>
        </el-table-column>
        <TableColumnTime prop="beginTime" label="开始时间" />
        <TableColumnTime prop="endTime" label="结束时间" />
        <TableColumnTime prop="beginOnlineTime" label="开播时间" />
        <el-table-column prop="loginId" label="所属账号" />
        <el-table-column prop="ip" label="查看摄像头" />
        <el-table-column prop="ip" label="查看播放地址" />
        <el-table-column label="操作" align="center" width="160" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="hanleOpen(row, true)">
              查看
            </el-button>
            <el-button link type="primary" @click="hanleOpen(row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        hide-on-single-page
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        small
      />
    </el-card>

    <GamesFormDialog
      v-model="visible"
      :title="detailFormDisable ? '查看赛事' : '编辑赛事'"
      :detail="active"
      :accounts="accounts"
      :disable="detailFormDisable"
      @submit="handleSubmit"
    />
  </div>
</template>
